<template>
    <view class="container">
        <!-- @scrolltolower="scrolltolower" -->
        <div class="pagetop">
            <div class="topitem">
                <div class="text">总签单</div>
                <div class="num">{{ allqd }}</div>
            </div>
            <div class="topitem">
                <div class="text">本月签单</div>
                <div class="num">{{ byqd }}</div>
            </div>
        </div>
        <view class="search-box block">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <!--
                 -->
            <input v-model="searchText" class="search-input" @input="searchInput" confirm-type="search"
                placeholder="搜索" />
        </view>
        <!-- 子弹发薪列表 -->
        <view>
            <view class="tab-radius">
                <!-- <tab-radius
                        :list="['离到期30天内', '已过期70天内']"
                        :active="payIndex"
                        @change="onPayTab"
                    /> -->
            </view>
            <div class="producttab">
                <div :class="{ tabitem: true, producttabactive: producttabactiveflag === index }"
                    v-for="(ele, index) in stateList" :key="index" @click="changeproducttab(ele, index)">{{ ele }}</div>
            </div>
            <view class="record">
                <view> 共有{{ totalCount }}条记录 </view>
                <!-- ../../static/home/sort.png -->
                <view class="row">
                    <!-- <view class="record-box record-box-active">
            <picker :value="reportStatus" @change="onReportStatus" class="row" mode="selector" :range="stateList">
              <view class="row">
                <view>{{ stateList[reportStatus] }}</view>
                <image class="sort-img" src="../../static/drop-down.png" />
              </view>
            </picker>
          </view> -->
                    <!-- sortSimplifyList -->
                    <view class="record-box">
                        <picker :value="sortIndex" @change="onSortStatus" class="row" mode="selector"
                            :range="reportStatus === 0 ? sortSimplifyList : sortList">
                            <view class="row">
                                <view>排序</view>
                                <image class="sort-img" src="../../static/my-client/reorder.png" />
                            </view>
                        </picker>
                    </view>
                </view>
            </view>
            <scroll-view class="record-list" @scrolltolower="onScrolltolower" scroll-y="true">
                <no-data v-if="list.length === 0" />
                <view class="record-i" v-for="(item, index) in list" :key="index"
                    @click="onGoDetail(item.companyId, item.productType, item.dealId, item.isVip)">
                    <!-- class="i-top" -->
                    <view>
                        <view class="row top-box">
                            <view>
                                <view class="top-state">
                                    <view :class="[
                                        'top-state-i',
                                        'i-insurance',
                                        item.productType === 0 ? 'i-pay' : '',
                                        item.productType === 1 ? 'i-electronic' : '',
                                    ]">{{
                                        item.productType === 1
                                            ? "电子签"
                                            : item.productType === 2
                                                ? "日日保"
                                                : item.productType === 3
                                                    ? "长期保"
                                                    : item.productType === 0
                                                        ? '子弹发薪'
                                        : "团意保"
                                        }}</view>
                                    <img class="w50-h20" v-if="item.isVip===1" src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerdb5a3f71-27c8-4d7b-b484-1f45d55ca183.png" alt="">
                                    <view class="top-state-i top-state-beyond" v-if="!!item.withoutDeduction &&
                                        (item.productType === 2 || item.productType === 3)
                                    ">超出30天未产生保费</view>
                                </view>
                                <view class="top-title">
                                    {{ item.companyName }}
                                </view>
                            </view>
                            <view class="top-account">
                                <view class="account-info account-info-active">
                                    <view class="account-num account-unit-red">
                                        <text class="account-unit">￥</text>
                                        {{ item.money || 0 }}
                                        <!-- <text class="account-unit"></text> -->
                                    </view>
                                    <view class="account-balance account-unit-red">
                                        {{
                                            item.productType === 1
                                                ? "累计充值"
                                                : item.productType === 2
                                                    ? "累计保费"
                                                    : item.productType === 3
                                                        ? "累计保费"
                                                        : "累计购买"
                                        }}
                                    </view>
                                </view>
                                <image v-if="true" class="top-account-img"
                                    src="../../static/home/orange-subscript.png" />
                                <image v-if="false" class="top-account-img"
                                    src="../../static/home/white-subscript.png" />
                            </view>
                        </view>
                    </view>
                    <view class="i-info">
                        <view class="info-row">
                            <view class="info-row-left"> 负责人： </view>
                            <text class="info-row-right">{{ item.salesName }}</text>
                        </view>
                        <view class="info-row">
                            <view class="info-row-left" style="flex-shrink: 0;"> 开通时间： </view>
                            <text class="info-row-right">{{ item.productOpenTime }}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- <customTabBar url="/pages/signing/index" /> -->
    </view>
</template>
<script setup lang="ts">
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getSign, GetSignDto } from '@/api/signing'
import noData from '@/components/no-data/no-data.vue'
import { share } from '@/utils/share'
import { fastStatistics } from '@/api/fast'
// import customTabBar from '@/components/tabbar/index.vue'

const pageNum = ref(1)
const hasNextPage = ref(true)
const list = ref([] as GetSignDto[])
const totalCount = ref(0)
const searchText = ref('')
const reportStatus = ref(0)
const getFastStatistics = async () => {
    const result = await fastStatistics()
    allqd.value = result.allSignCount
    byqd.value = result.signCount
    console.log(result, 'result')
}
const allqd = ref(0)
const byqd = ref(0)
const producttabactiveflag = ref(0)
const changeproducttab = (ele: any, i: any) => {
    producttabactiveflag.value = i
    reportStatus.value = i
    searchInput()
}
// 全部产品 = ‘’ 剩下的根据下标 减1 判断  但是团意保的 传递参数是 6
const stateList = ref(['全部产品', '子弹发薪', '电子签', '日日保', '长期保', '团意保'])
onLoad(() => {
    share()
    getFastStatistics()
    wx.showShareMenu({
        withShareTicket: true,
        /* //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击 */
        menus: ['onShareAppMessage', 'onShareTimeline']
    })
})
const sortIndex = ref(0)
const sortSimplifyList = ref(['按开通时间倒序', '按开通时间正序'])
const sortList = ref([
    '按开通时间倒序',
    '按开通时间正序',
    '按累计金额降序',
    '按累计金额正序'
])
const onSortStatus = (index: { detail: { value: number } }) => {
    sortIndex.value = index.detail.value
    searchInput()
}
const onReportStatus = (index: { detail: { value: number } }) => {
    console.log(index.detail.value, 'index.detail.value')
    if (Number(index.detail.value) === 0 && sortIndex.value >= 3) {
        sortIndex.value = 0
    }
    reportStatus.value = Number(index.detail.value)
    console.log(reportStatus.value, 'reportStatus')

    searchInput()
    // reportStatus.value =
    // searchInput()
}
// 到达底部
const onScrolltolower = () => {
    console.log('调用啦')
    if (!hasNextPage.value) {
        return
    }
    pageNum.value += 1
    getSignList()
}

// 进入详情
const onGoDetail = async (id: number | string, type: string | number, dealId: number | string, isVip: number | string) => {
    console.log(id, type, 'type')
    if (Number(type) === 2) {
        uni.navigateTo({
            url:
                '/packageRemind/pages/insurance-detail/index?id=' +
                id +
                '&type=' +
                type +
                '&dealId=' +
                dealId +
                '&isVip=' +
                isVip
        })
    }
    if (Number(type) === 3) {
        uni.navigateTo({
            url:
                '/packageRemind/pages/longInsurance-detail/index?id=' +
                id +
                '&dealId=' +
                dealId
        })
    }
    if (Number(type) === 0) {
        uni.navigateTo({
            url:
                '/packageRemind/pages/pay-detail/index?id=' + id + '&dealId=' + dealId
        })
    }
    if (Number(type) === 1) {
        // 跳转电子签详情页
        uni.navigateTo({
            url:
                '/packageRemind/pages/electron-detail/electron-detail?id=' +
                id +
                '&dealId=' +
                dealId
        })
    }
    if (Number(type) === 6) {
        // 跳转团意保详情页
        uni.navigateTo({
            url:
                '/packageRemind/pages/gcpa-insurance-detail/index?id=' +
                id +
                '&dealId=' +
                dealId
        })
    }
}
let timer = null as any

const searchInput = async () => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
        list.value = []
        hasNextPage.value = true
        pageNum.value = 1
        getSignList()
        console.log(33333, searchText.value)
        if (searchText.value === 'zd__258046') {
            changeEnv()
        }
    }, 300)
}

// 切换环境
const changeEnv = () => {
    const list = ['test', 'production']
    if (process.env.NODE_ENV === 'development') {
        list.unshift('development')
    }
    uni.showActionSheet({
        itemList: list,
        /* eslint-disable-next-line */
        success: (res: any) => {
            /* eslint-disable-next-line */
            (getApp as any)().globalData.envType = list[res.tapIndex];
            setTimeout(() => {
                uni.reLaunch({
                    url: '/pages/signing/index'
                })
            }, 100)
        },
        fail: function fail (res) {
            console.log(res.errMsg)
        }
    })
}

const getSignList = async () => {
    const result = await getSign({
        pageNum: pageNum.value,
        pageSize: 50,
        productType: Number(reportStatus.value) === 5 ? 6 : Number(reportStatus.value) === 0 ? '' : reportStatus.value - 1,
        companyName: searchText.value || '',
        sortOrder: sortIndex.value
    })
    if (!result.hasNextPage) {
        hasNextPage.value = false
    }
    const arr = []
    arr.push(...list.value)
    arr.push(...result.list)
    list.value = arr
    totalCount.value = result.totalCount
    console.log(result, 'result')
};
(async () => {
    console.log('调用啦吗')
    getSignList()
})()
</script>
<style lang="scss" scoped>
.container {
    // height: calc(100vh - constant(safe-area-inset-bottom) - 100rpx);
    // height: calc(100vh - env(safe-area-inset-bottom) - 100rpx);
    height: 100vh;
    overflow: auto;
    // padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
    // padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
    background: #fafafc;
}

.tab-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-radius {
    padding: 0rpx 30rpx;
}

.scroll {
    height: 100vh;
}

.record {
    padding: 0 30rpx;
    @include flex-between;
    color: $grey;
    font-size: $font-normal;
    margin-top: 30rpx;

    .record-box {
        @include flex-between;
        color: #565868;
        font-size: $font-normal;
    }

    .record-box-active {
        margin-right: 30rpx;
    }

    .sort-img {
        width: 28rpx;
        height: 28rpx;
        margin-left: 8rpx;
    }
}

.record-list {
    box-sizing: border-box;
    padding: 0 30rpx;
    // height: 50vh;
    // 640rpx
    // - 540rpx
    height: calc(100vh - 500rpx);
    margin-top: 34rpx;

    .record-i {
        padding: 30rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
    }

    .i-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1rpx solid #f4f4f7;
        padding-bottom: 30rpx;
    }

    .top-state {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
    }

    .top-state-i {
        font-size: $font-base;
        color: #ffffff;
        padding: 5rpx 15rpx;
        border-radius: 30rpx;
        margin-right: 16rpx;
    }

    .i-insurance {
        background: #ffa814;
    }

    .i-pay {
        background: #00d679;
    }

    .i-electronic {
        background: #3e5ff5;
    }

    .top-state-beyond {
        background: rgba(255, 181, 55, 0.102);
        color: #ffa814;
    }

    .top-title {
        width: 471rpx;
        font-size: $font-medium;
        font-weight: bold;
        color: $black;
    }

    .top-account {
        position: relative;
        width: 200rpx;
        color: #ff7642;
    }

    .account-num {
        font-size: $font-large;
        font-weight: bold;
        display: flex;
        align-items: baseline;
        text-align: right;
        justify-content: flex-end;
    }

    .account-unit {
        font-size: $font-small;
    }

    .account-unit-red {
        color: #ff7642;
    }

    .account-balance {
        text-align: right;
        color: $font-small;
    }

    .account-info {
        position: absolute;
        top: -10rpx;
        right: 0;
        z-index: 2;
    }

    .account-info-active {
        color: #9497b1 !important;
    }

    .top-account-img {
        position: absolute;
        width: 72rpx;
        height: 72rpx;
        top: 0;
        right: 0;
        z-index: 0;
    }

    .i-info {
        margin-top: 30rpx;
    }

    .info-row {
        display: flex;
    }

    .info-row-left {
        min-width: 138rpx;
        color: $grey;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }

    .info-row-right {
        color: $black;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
}

.head {
    width: 690rpx;
    margin: 0 auto;
}

.user-avatar {
    @include avatar(70rpx);
    border: 1rpx solid #e2e6f1;
    margin-right: 15rpx;
}

.user {
    display: flex;
    color: $grey;
    align-items: flex-start;
    justify-content: space-between;
}

.head-user-left {
    display: flex;
    align-items: flex-start;
}

.head-user-right {
    margin-top: 10rpx;
    width: 190rpx;
    height: 60rpx;
    line-height: 60rpx;
    padding-left: 26rpx;
    background: rgba(255, 126, 104, 1);
    color: #ffffff;
    font-size: 24rpx;
    border-radius: 30rpx;

    .extension {
        width: 60rpx;
        height: 60rpx;
        float: right;
    }
}

.user-label {
    margin: 10rpx 0 0 16rpx;
    padding: 2rpx 15rpx;
    box-sizing: border-box;
    background: rgba(0, 214, 121, 0.1);
    color: #00d679;
    font-size: 24rpx;
    border-radius: 19rpx;
}

.user-name {
    font-size: $font-medium;
    font-weight: bold;
    color: $black;
    margin-bottom: 6rpx;
}

.basic {
    width: 690rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    position: relative;
    height: 154rpx;
}

.basic-bg {
    position: absolute;
    width: 690rpx;
    height: 154rpx;
}

.basic-data {
    top: 40rpx;
    width: 100%;
    @include padding(0 58rpx);
    position: absolute;
    display: flex;
    justify-content: space-between;
    color: white;
}

.basic-msg {
    font-size: $font-small;
}

.basic-msg-number {
    margin-top: 16rpx;
    font-size: 30rpx;

    .number {
        font-size: $font-large;
        font-weight: bold;
    }
}

.helper {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    grid-template-rows: repeat(auto-fill);
    grid-gap: 24rpx;
    padding: 20rpx;
    align-items: center;

    .grid {
        background: #f9f9fa;
        padding: 32rpx;
        text-align: center;
        border-radius: 8rpx;
    }

    .grid-title .bold {
        font-size: $font-large;
        font-weight: bold;
    }

    .grid-descibe {
        color: $grey;
        font-size: $font-small;
    }

    .grid-descibe .bold {
        color: $green;
        font-weight: bold;
        margin: 0 4rpx;
    }
}

.helper-title {
    text-align: center;
}

.customer {
    background: #f9f9fa;
    border-radius: 8rpx;
    padding: 30rpx;
    margin-top: 24rpx;
}

.customer-i {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 350rpx;
    font-size: $font-medium;
    font-weight: bold;
}

.customer-business {
    font-size: 24rpx;
    color: #00d679;
}

.customer-msg {
    margin-top: 24rpx;
    color: #202536;
}

.customer-msg-title {
    color: $grey;
}

.block-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24rpx;
}

.select-sort {
    color: #9497b1;
    font-size: 28rpx;
    display: flex;
    align-items: center;
}

.just-image {
    width: 25rpx;
    height: 25rpx;
    margin-left: 5rpx;
}

.just-image-active {
    transform: rotateX(-180deg);
}

.search-box {
    padding: 0;
}

.top-box {
    align-items: flex-start;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f4f4f7;
}

.pagetop {
    width: 100%;
    box-sizing: border-box;
    height: 152rpx;
    padding: 15rpx 48rpx;
    margin-top: 21rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .topitem {
        width: 48%;
        box-sizing: border-box;
        padding: 24rpx 33rpx;
        background-color: #F4F4F7;
        border-radius: 16rpx;
        font-size: 20rpx;
        color: #565868;
        height: 100%;

        .num {
            margin-top: 12rpx;
            font-size: 36rpx;
            color: #202536;
            font-weight: 900;
        }
    }
}

.producttab {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 28rpx;
    height: 80rpx;
    width: 100%;
    box-sizing: border-box;

    .tabitem {
        color: #565868;
    }
}

.producttabactive {
    color: #3E5FF5 !important;
    font-weight: 700;
}

.w50-h20 {
    width: 100rpx;
    height: 40rpx;
}
</style>
